<template>
  <div class="app-container customer-div">
    <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="my">我负责的</el-menu-item>
      <el-menu-item index="all" v-if="allMarket">全部</el-menu-item>
      <el-menu-item index="goodsSetting" v-if="marketGoodsSetting">商品设置</el-menu-item>
      <el-menu-item index="formulaSetting" v-if="marketFormulaSetting">公式设置</el-menu-item>
    </el-menu>
    <div v-show="tab=='my' || tab=='all'">
        <market ref="market"></market>
    </div>
    <div v-show="tab=='goodsSetting'">
      <goodsSet ref="goodsSetting"></goodsSet>
    </div>
    <div v-show="tab=='formulaSetting'">
      <formulaSet ref="formulaSetting"></formulaSet>
    </div>


  </div>
</template>
<script>
import goodsSet from './components/goodsSet.vue'
import market from './components/market.vue'
import formulaSet from './components/formulaSet.vue'
import store from '@/store'
export default {
  name: "index",
  components : {
    market,goodsSet,formulaSet
  },
  data(){
    return {
      tab:'my',
      roles:store.getters.roles ? store.getters.roles : [],
    }
  },
  computed: {
    allMarket() {
      if(this.roles.indexOf("allMarket") != -1){
        return true
      }else{
        return false
      }
    },
    marketGoodsSetting() {
      if(this.roles.indexOf("marketGoodsSetting") != -1){
        return true
      }else{
        return false
      }
    },
    marketFormulaSetting() {
      if(this.roles.indexOf("marketFormulaSetting") != -1){
        return true
      }else{
        return false
      }
    },
  },

  created() {
    setTimeout(()=>{
      this.$refs.market.init(this.tab)
    })

  },
  filters: {

  },
  methods: {
    handleSelect(key){
      this.tab = key;
      if(key == 'my' || key == 'all'){
        this.$refs.market.init(key)
      }else if(key == 'goodsSetting'){
        this.$refs.goodsSetting.init()
      }else{
        this.$refs.formulaSetting.init()
      }
    },
  }
}
</script>

<style lang="scss">

</style>
